<template>
  <div class="flockDetails">
    <mt-header>
      <mt-button icon="back" slot="back"></mt-button>
      <mt-button slot="more" @click="goSet">
        <img
          src="@/assets/images/flock.svg"
          height="20"
          width="20"
          slot="icon"
        />
      </mt-button>
    </mt-header>
    <div class="flockContent">
      <info-list :infoList="infoList"></info-list>
      <div class="flockInput">
        <textarea cols="5" class="textarea" rows="1" v-model="text"></textarea>
        <mt-button type="primary" class="btn" @click="submit">发送</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import MtHeader from "@/components/MtHeader";
import InfoList from "../../components/InfoList.vue";
export default {
  data() {
    return {
      text: "",
      infoList: [
        {
          title: "系统消息",
          info: "来自重庆的帅哥给你发了一个好感",
          time: "12:00",
          image:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201508%2F08%2F20150808085253_ctAEQ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627957281&t=ea1eb40be6a9477f7117ed1d11b8359f",
        },
        {
          title: "论坛消息",
          info: "来自重庆的帅哥给你发了一个好感",
          time: "12:00",
          image:
            "https://img2.baidu.com/it/u=3479452402,1394617115&fm=26&fmt=auto&gp=0.jpg",
        },
        {
          title: "我的留言",
          info: "来自重庆的帅哥给你发了一个好感",
          time: "12:00",
          image:
            "https://img2.baidu.com/it/u=2591353263,47732432&fm=26&fmt=auto&gp=0.jpg",
        },
        {
          title: "小芳",
          info: "来自重庆的帅哥给你发了一个好感来自重庆的帅哥给你发了一个好感来自重庆的帅哥给你发了一个好感来自重庆的帅哥给你发了一个好感",
          time: "12:00",
          image:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F20181%2F19%2F2018119163229_WW8we.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627957281&t=5faf1fbb71025ceaa6ba454402bf4c9a",
        },
      ],
    };
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {
    submit: function () {
      //console.log(this.text);
      let infoBox = document.getElementById("infoBox");
      let text = {
        my: true,
        title: "小芳",
        info: "来自重庆的帅哥给你发了一个好感",
        time: "12:00",
        image:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F20181%2F19%2F2018119163229_WW8we.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627957281&t=5faf1fbb71025ceaa6ba454402bf4c9a",
      };
      text.info = this.text;
      if (this.text != "") {
        this.infoList.push(text);
        console.log('前',infoBox.scrollTop);
        infoBox.scrollTop = infoBox.clientHeight;
        console.log('后',infoBox.scrollTop);
        this.text = "";
      }
    },
    goSet: function () {
      this.$router.push("/info/infoFlock/flockSet");
    },
  },

  //组件
  components: {
    MtHeader,
    InfoList,
  },

  //生命周期 - 实例完成
  created() {
    this.$route.meta.title = this.$store.state.flockName;
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.flockDetails {
  height: 100%;
  background: whitesmoke;
}
.flockContent {
  height: calc(100% - 50px);
  background: whitesmoke;
  .infoBox {
    height: calc(100% - 46px);
    overflow: scroll;
  }
}
.flockInput {
  width: calc(100% - 20px);
  margin: 0 10px;
  padding: 5px 0;
  position: fixed;
  bottom: 0;
  display: flex;
}
.textarea {
  background: white;
  border: none;
  margin-right: 10px;
  padding: 6px;
  border-radius: 16px;
  outline: none;
  resize: none;
  flex: 1;
  font-size: 18px;
}
::v-deep .btn {
  width: auto;
  height: auto;
}
::v-deep .mint-cell-title {
  float: right;
}
</style>
